<template>
  <div class="login">
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    <!-- <back-btn></back-btn> -->
    <!-- <h3 class="text-center header-title">用户登陆</h3> -->
    <form class="form-horizontal col-md-6 col-md-offset-3" action="#" method="POST" autocomplete="off">
      <div class="form-group">
        <label for="user" class="col-md-3 label-control">用户名</label>
        <div class="col-md-9">
          <input type="text" name="user" id="user" v-model="userinfo.user" class="form-control" placeholder="请输入用户名或邮箱" @focus="rules.user.pass = true" >
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.user.pass">
          用户名格式错误
        </div>
      </div>
      <div class="form-group">
        <label for="password" class="col-md-3 label-control">密码</label>
        <div class="col-md-9">
          <input type="password" name="password" v-model="userinfo.password" id="password" class="form-control" placeholder="请输入密码" @focus="rules.password.pass = true" >
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.password.pass">
          密码格式错误
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-3 col-md-9">
          <div class="checkbox col-md-6">
            <label>
              <input type="checkbox" name="memory" v-model="userinfo.memory" >记住密码
            </label>
          </div>
          <div class="checkbox text-right col-md-6" >
            <label>
              <input class="hide" type="checkbox">
              <router-link to="/forgetPassword">忘记密码？</router-link>
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-3 col-md-9">
          <button class="btn btn-primary" @click.prevent="loginBtn">登陆</button>
        </div>
      </div>
    </form>
  </div>
</template>


<script>
  import Storage from '../servers/Storage'
  export default {
    data () {
      return {
        userinfo: {
          user: '',
          password: '',
          memory: true
        },
        rules: {
          user: {
            patt: /^([\w\u4E00-\u9FA5]){2,16}$/,
            pass: true
          },
          password: {
            patt: /^([\w]){6,16}$/,
            pass: true
          },
          email: {
            patt: /^\w+@\w+(\.[\w]+){1,2}$/
          }
        }
      }
    },
    methods: {
      loginBtn () {
        //  验证
        if (!this.userinfoTest()) {
          return
        }
        this.$http.post(this.rootPath + '/login', this.userinfo).then((res) => {
          switch (res.data) {
            case '0':
              window.alert('用户名或密码错误！')
              break
            case '-1':
              window.alert('用户未注册')
              this.initUserinfo()
              break
            default:
              Storage.set(Storage.key, res.data)
              this.$store.commit('logined', res.data)
              window.alert('登陆成功！')
              this.initUserinfo()
              this.$router.push('/home')
              break
          }
        })
      },
      initUserinfo () {
        this.userinfo = {
          user: '',
          password: '',
          memory: true
        }
      },
      userinfoTest () {
        var rules = this.rules
        var valid = true
        if (!rules.user.patt.test(this.userinfo.user)/* && !rules.email.patt.test(this.userinfo.user)*/) {
          rules.user.pass = false
          valid = false
        }

        if (!rules.password.patt.test(this.userinfo.password)) {
          rules.password.pass = false
          valid = false
        }
        return valid
      }
    },
    props: ['rootPath']
  }
</script>